<template>
	<view>
		<div id="app">
			<view class="container">
				<view class="header">
					<h1>供销系统采购管理</h1>
					<p>管理您的采购订单、工厂分配及库存状态</p>
				</view>

				<!-- 筛选区域 -->
				<view class="filter-card" style="display: flex;align-items: center; width: 90%;"
					@click="expandedSearchCheck">
					<view class="filter-title" style="flex: 1;">订单筛选 </view>
					<view style="margin-left: auto; ">
						<u-icon name="arrow-right" class="product-arrow"
							:customStyle="expandedSearch ? 'transform: rotate(90deg);' :  ''" color="#95a5a6"></u-icon>
					</view>
				</view>
				<view>
					<view class="filter-row" v-if="expandedSearch">
						<view class="filter-item">
							<view class="picker-btn" @click="showFactoryPicker = true">
								<text :class="{'picker-placeholder': !factory}">
									{{ factory ? factories[0].find(f => f.userId === factory).userNickName : '请选择收货人' }}
								</text>
								<u-icon name="arrow-down" size="24"></u-icon>
							</view>
						</view>
						<view class="filter-item">
							<view class="picker-btn" @click="showStatusPicker = true">
								<text :class="{'picker-placeholder': !orderStatus}">
									{{ orderStatus ? statusOptions[0].find(s => s.value === orderStatus).label : '入库状态' }}
								</text>
								<u-icon name="arrow-down" size="24"></u-icon>
							</view>
						</view>
						<view class="filter-item full-width">
							<view class="picker-btn" @click="showTypePicker = true">
								<text :class="{'picker-placeholder': !purchaseType}">
									{{ purchaseType ? typeOptions[0].find(t => t.value === purchaseType).label : '入库类型' }}
								</text>
								<u-icon name="arrow-down" size="24"></u-icon>
							</view>
						</view>
						<!-- 创建时间范围选择 -->
						<view class="filter-item full-width">
							<view class="picker-btn" @click="showStartTimePicker = true">
								<text :class="{'picker-placeholder': !startTime}">
									{{ startTime ? startTime : '选择开始时间' }}
								</text>
								<u-icon name="arrow-down" size="24"></u-icon>
							</view>
						</view>

						<view class="filter-item full-width">
							<view class="picker-btn" @click="showEndTimePicker = true">
								<text :class="{'picker-placeholder': !endTime}">
									{{ endTime ? endTime : '选择结束时间' }}
								</text>
								<u-icon name="arrow-down" size="24"></u-icon>
							</view>
						</view>
						<view class="search-container " style="width: 100%; margin: 0 10px 10px 10px;">
							<u-search placeholder="搜索成品或配件..." v-model="searchText"
								:showAction="false"></u-search>

						</view>
						<!-- <view class="search-container " style="width: 100%; margin: 0 10px 10px 10px;">
							<u-search placeholder="入库单号" v-model="purchaseNo" :showAction="false"></u-search>
						
						</view> -->
						<view class="btn-container">
							<!-- 筛选按钮 -->
							<u-button type="primary" @click="searchOrders" class="search-btn">查询</u-button>
							<u-button type="default" @click="resetFilters" class="reset-btn">重置筛选</u-button>
						</view>
					</view>


				</view>

				<!-- 数据展示区域 -->
				<view class="data-card">
					<view class="data-header">
						<view class="data-title">采购订单列表</view>
						<view class="data-count">共 {{ total }} 条记录</view>
					</view>

					<view v-if="total === 0" class="no-data">
						<u-icon name="list" size="80" color="#bdc3c7"></u-icon>
						<p>暂无订单数据</p>
					</view>

					<view v-else>

						<!-- 折叠显示订单 -->
						<view v-for="(order, index) in orders" :key="order.id" class="collapse-item">
							<view class="collapse-header">
								<view class="collapse-title" @click="toggleOrder(index)">
									<u-icon name="arrow-right" class="collapse-icon" :customStyle="order.expanded ?
										    'transform: rotate(90deg); transform-origin: center;' : 
										    ''"></u-icon>
									入库单号: {{ order.purchaseNo }}
								</view>
								<view>

									<text class="status-tag" :class="order.statusClass">{{ order.statusName }}</text>
									<text class="action-btn btn-outline"
										v-if="order.status === 'special' || order.status === 'correctionNum' || order.status === 'ret'"
										@click="purchaseModifyHandle(order)">{{order.auditStatus === 'wait' ? '处理'  : '详情'}}</text>

									<text class="action-btn btn-outline" v-if="order.status === 'in'"
										@click="purchaseEdit(order)">编辑</text>
								</view>
							</view>

							<view class="collapse-content" v-show="order.expanded">
								<view class="sub-item">
									<view class="sub-item-header">
										<view class="sub-item-title">基本信息</view>
										<view style="color: #7f8c8d; font-size: 26rpx;">{{ order.purchaseNo }}</view>
									</view>
									<view class="sub-item-content">
										<view class="detail-item">
											<text class="detail-label">入库类型：</text>
											<text class="detail-value">{{ order.purchaseType }}</text>
										</view>
										<view class="detail-item">
											<text class="detail-label">创建时间：</text>
											<text class="detail-value">{{ order.createTime }}</text>
										</view>
										<view class="detail-item">
											<text class="detail-label">操作人：</text>
											<text class="detail-value">{{ order.createUser }}</text>
										</view>
										<view class="detail-item">
											<text class="detail-label">操作人角色：</text>
											<text class="detail-value">{{ order.createUserJob }}</text>
										</view>
										<view class="detail-item">
											<text class="detail-label">备注：</text>
											<text class="detail-value">{{ order.remark }}</text>
										</view>
									</view>

									<!-- 新增：图片展示区域 -->
									<view style="" v-if="order.sendImages.url">
										<text class="detail-label">单据：</text>
										<view class="image-container">
											<view v-for="(img, imgIndex) in order.sendImages.url" :key="imgIndex"
												class="image-item">
												<u-image :src="getOptimizedImageUrl(img)" alt="img" />
												<!-- <view class="image-caption">{{ img }}</view> -->
											</view>
										</view>
									</view>

									<!-- 新增：签名展示区域 -->
									<view style="margin-top: 20px;">
										<text class="detail-label">签名：</text>
										<view class="signature-container">
											<u-image :src="order.sendImages.sign" mode="widthFix"
												class="signature-image" alt="签名" />
										</view>
									</view>
								</view>

								<view v-for="(factory, fIndex) in order.factories" :key="factory.factoryId"
									class="sub-item">
									<view class="sub-item-header">
										<view class="sub-item-title">
											<u-icon name="home" size="32" color="#3498db"
												style="margin-right: 10rpx;"></u-icon>
											工厂: {{ factory.factoryName }}
										</view>
										<view style="color: #7f8c8d; font-size: 26rpx;">账户类型: {{ factory.jobName }}
										</view>
									</view>

									<view v-for="(product, pIndex) in factory.productsParts" :key="pIndex"
										style="margin-top: 25rpx;">
										<view style="display: flex; align-items: center; margin-bottom: 20rpx;">
											<u-icon name="shopping-cart" size="32" color="#2ecc71"
												style="margin-right: 10rpx;"></u-icon>
											<text style="font-weight: 500; color: #2c3e50; font-size: 28rpx;">成品:
												{{ product.productName }}</text>
												<text style="margin-left: 30rpx; color: #7f8c8d; font-size: 26rpx;" v-if="product.productProcessingPrice">加工费:
												{{ product.productProcessingPrice }} </text>
										</view>

										<view style="overflow: auto;" class="accessory-list-container">
											<!-- 表头 -->
											<view class="table-header">
												<view class="col-name">配件名称</view>
												<view class="col-quantity">数量</view>
												<view class="col-price">单价</view>
												<view class="col-action">操作</view>
											</view>
											<!-- 表格内容 -->
											<view class="table-body">
												<view class="table-row" v-for="(accessory, aIndex) in product.partsList"
													:key="accessory.id">
													<view class="col-name">{{ accessory.name }}</view>
													<view class="col-quantity">{{ accessory.quantity }}</view>
													<view class="col-price">¥{{ accessory.partsPrice}}</view>
													<view class="col-action">
														<text class="action-btn2 btn-outline"
															@click="showMaterialDetail(accessory)">详情</text>
													</view>
												</view>
											</view>


										</view>
									</view>
									<view v-if=" order.status === 'success'">
										<view v-if="order.modifyTime ">
											<text class="detail-label">入库时间:</text>
											<text class="detail-value">{{ order.modifyTime }}</text>
										</view>
										<!-- 新增：图片展示区域 -->
										<view style="margin-top: 20px;">
											<text class="detail-label">收货现场图片</text>
											<view class="image-container">
												<view v-for="(img, imgIndex) in order.putImages.url" :key="imgIndex"
													class="image-item">
													<u-image :src="getOptimizedImageUrl(img)" alt="img" />
												</view>
											</view>
										</view>

										<!-- 新增：签名展示区域 -->
										<view style="margin-top: 20px;">
											<text class="detail-label">收货签名</text>
											<view class="signature-container">
												<u-image :src="order.putImages.sign" mode="widthFix"
													class="signature-image" alt="签名" />
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" />
				</view>

				<view class="footer">
					<text>供销采购管理系统 © 2023</text>
				</view>

				<view>
					<!-- 工厂选择器 -->
					<u-picker :show="showFactoryPicker" :columns="factories" @confirm="selectFactory"
						keyName="userNickName" :closeOnClickOverlay=true @cancel="showFactoryPicker = false"></u-picker>
				</view>


				<!-- 状态选择器 -->
				<u-picker :show="showStatusPicker" :columns="statusOptions" @confirm="selectStatus" keyName="label"
					@cancel="showStatusPicker = false"></u-picker>

				<!-- 类型选择器 -->
				<u-picker :show="showTypePicker" :columns="typeOptions" @confirm="selectType" keyName="label"
					@cancel="showTypePicker = false"></u-picker>

				<!-- 成品选择器 -->
				<u-picker :show="showProductPicker" :columns="products" @confirm="selectProduct"
					keyName="label"></u-picker>

				<!-- 弹窗组件 -->

			</view>
			<purchase-detail :visible.sync="showPopup" :materialData="currentMaterial" v-if="showPopup"
				@close="handlePopupClose" />
			<purchase-modify :visible.sync="showPurchaseModifyHandlePopup" @update-value="modifyConfirmHandle"
				:materialData="currentPurchaseModifyMaterial" v-if="showPurchaseModifyHandlePopup" />
			<!-- 开始时间选择器 -->
			<u-datetime-picker :show="showStartTimePicker" v-model="tempStartTime" mode="datetime"
				@confirm="selectStartTime" @cancel="showStartTimePicker = false" />

			<!-- 结束时间选择器 -->
			<u-datetime-picker :show="showEndTimePicker" v-model="tempEndTime" mode="datetime" @confirm="selectEndTime"
				@cancel="showEndTimePicker = false" />

		</div>
	</view>
</template>


<script>
	import PurchaseDetail from '@/cmhqPage/purchaseList/purchaseDetail.vue'
	import PurchaseModify from '@/cmhqPage/purchaseList/purchaseModify.vue'
	import cfg from '@/utils/config.js';
	export default {
		mounted() {},
		components: {
			PurchaseDetail,
			PurchaseModify
		},
		onLoad(options) {
			if (options.type) {
				this.queryType = options.type;
			}
			this.factoryList();
			this.purchaseOrderList();

		},
		data() {
			return {
				status: 'loading',
				isload: true,
				page: 1,
				rows: 10,

				startTime: '', // 开始时间（最终显示/提交用）
				endTime: '', // 结束时间（最终显示/提交用）
				tempStartTime: new Date().getTime(), // picker 默认值
				tempEndTime: new Date().getTime(),
				showStartTimePicker: false,
				showEndTimePicker: false,

				showPopup: false,
				showPurchaseModifyHandlePopup: false,
				currentMaterial: {},
				currentPurchaseModifyMaterial: {},
				queryType: '',
				purchaseNo: '',
				factory: '',
				orderStatus: '',
				purchaseType: '',
				searchText: '',
				expandedSearch: false,


				// 选择器显示状态
				showFactoryPicker: false,
				showStatusPicker: false,
				showTypePicker: false,
				showProductPicker: false,

				// 选项数据
				factories: [],
				statusOptions: [
					[{
							value: 'success',
							label: '完成'
						},
						{
							value: 'special',
							label: '特采'
						},
						{
							value: 'correctionNum',
							label: '修数'
						},
						{
							value: 'in',
							label: '待入库'
						},
						{
							value: 'ret',
							label: '取消'
						}
					]
				],
				typeOptions: [
					[{
							value: 'purchase',
							label: '采购入库'
						},
						{
							value: 'return',
							label: '退货入库'
						}
					]
				],
				products: [],
				accessories: [],

				// 订单数据
				orders: [],
				total: 0
			};
		},
		computed: {
			// 过滤后的订单
			filteredOrders() {
				return this.orders;
			}
		},
		onShow() {
			
			// var that = this;
			// that.isLogin = getLocal('token')?.token;
			// if (that.isLogin) {
			// 	that.getList();
			// }

			// console.log('是否登陆', that.isLogin)
			// this.getList();
		},
		methods: {
			onReachBottom() {
				this.purchaseOrderList();
			},
			// 查询订单
			searchOrders() {
				this.orders = [];
				this.page = 1;
				this.isload = true;
				this.purchaseOrderList();
			},
			// 选择开始时间
			selectStartTime(e) {
				this.startTime = this.formatDateTime(e.value);
				this.showStartTimePicker = false;
			},
			// 选择结束时间
			selectEndTime(e) {
				this.endTime = this.formatDateTime(e.value);
				this.showEndTimePicker = false;
			},
			// 格式化时间戳为 "YYYY-MM-DD HH:mm:ss"
			formatDateTime(timestamp) {
				const date = new Date(timestamp);
				const pad = (n) => (n < 10 ? '0' + n : n);
				return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ` +
					`${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
			},
			purchaseOrderList() {
				var qt = this.queryType;
				var that = this;
				if (!that.isload) {
					// that.$uti.alert('没有更多数据了');
					return;
				}
				that.status = 'loading';

				that.$http.get('purchaseOrder/list', {
					purchaseNo: that.purchaseNo,
					orderStatus: that.orderStatus,
					purchaseType: that.purchaseType,
					userId: that.factory,
					searchText: that.searchText,
					pageNo: that.page,
					listType: 'send',
					sTime: this.startTime,
					eTime: this.endTime,
					isQueryAuditStatus: qt,
					pageSize: that.rows
				}, function(res) {
					if (res.success) {
						if (that.page * 10 < res.data.total) {
							that.status = 'loadmore';
							that.page++;
						} else {
							that.isload = false;
							that.status = 'nomore';
						}

						res.data.items.forEach(item => {
							that.orders.push(item);
						})
						console.log('订单列表', that.dataList)
						that.total = res.data.total;
						// that.$set(that.groups[0], 'productList', that.cloneProducts(res.data.items));
					} else {
						that.$uti.alert(res.message);
						that.isload = false;
						that.status = 'nomore';
					}
				})

			},
			factoryList() {
				this.$http.get('factoryUser/list', {

				}, res => {
					if (res.success) {
						this.factories = res.data
						// this.factories = JSON.parse(JSON.stringify(res.data.items))
					}
				})
			},
			expandedSearchCheck() {
				if (this.expandedSearch) {
					this.expandedSearch = false
				} else {
					this.expandedSearch = true
				}

			},
			// 选择工厂
			selectFactory(e) {
				const index = e.indexs[0];
				this.factory = this.factories[0][index].userId;
				this.showFactoryPicker = false;
			},

			// 选择状态
			selectStatus(e) {
				const index = e.indexs[0];
				this.orderStatus = this.statusOptions[0][index].value;
				this.showStatusPicker = false;

			},

			// 选择类型
			selectType(e) {

				const index = e.indexs[0];
				this.purchaseType = this.typeOptions[0][index].value;
				this.showTypePicker = false;
			},

			// 选择成品
			selectProduct(e) {
				const index = e.indexs[0];
				this.type = this.product[0][index].value;
				this.showProductPicker = false;

				this.selectedProduct = product.value;
				this.selectedProductName = product.label;
				this.loadAccessories();
			},

			// 加载配件
			loadAccessories() {
				if (!this.selectedProduct) {
					this.accessories = [];
					return;
				}
			},

			// 选择配件
			selectAccessory(accessory) {
				if (accessory.checked && !this.selectedAccessories.some(a => a.id === accessory.id)) {
					this.selectedAccessories.push({
						id: accessory.id,
						name: accessory.name,
						model: accessory.model
					});
				} else if (!accessory.checked) {
					const index = this.selectedAccessories.findIndex(a => a.id === accessory.id);
					if (index !== -1) {
						this.selectedAccessories.splice(index, 1);
					}
				}
			},

			// 移除配件
			removeAccessory(index) {
				const accessoryId = this.selectedAccessories[index].id;
				this.selectedAccessories.splice(index, 1);

				// 取消对应的复选框选中状态
				const accessory = this.accessories.find(a => a.id === accessoryId);
				if (accessory) {
					accessory.checked = false;
				}
			},

			// 查看配件详情
			viewAccessoryDetail(accessory) {
				this.$uti.alert(`查看配件详情: ${accessory.name}`);
				// 实际应用中这里会打开详情弹窗
			},

			// 处理配件
			handleAccessory(accessory) {
				this.$u.toast(`处理配件: ${accessory.name}`);
			},

			// 重置筛选条件
			resetFilters() {
				this.factory = '';
				this.orderStatus = '';
				this.purchaseNo = '';
				this.orderStatus = '';
				this.searchText = '';
				this.startTime = '';
				this.endTime = '';
				this.$uti.alert('已重置筛选条件');
			},

			// 展开/折叠订单
			toggleOrder(index) {
				this.orders[index].expanded = !this.orders[index].expanded;
			},

			// 模拟API调用
			fetchOrders() {
				this.$u.get('/api/orders', {
					factory: this.factory,
					status: this.status,
					type: this.type,
					product: this.selectedProduct,
					accessories: this.selectedAccessories.map(a => a.id)
				}).then(res => {
					this.orders = res.data;
				}).catch(err => {
					this.$u.toast('获取数据失败');
				});
			},
			// 显示物料详情
			showMaterialDetail(material) {
				this.currentMaterial = {
					...material
				}
				this.showPopup = true
			},
			// 数据修正处理
			purchaseModifyHandle(order) {
				if (order.status === 'correctionNum') {
					this.$http.get('purchaseOrder/getCorrectionNumList', {
						orderId: order.id
					}, res => {
						if (res.success) {

							this.currentPurchaseModifyMaterial = {
								correctionProductList: res.data.productList,
								type: 'handle',
								orderId: order.id,
								status: order.status,
								correctionPartsList: res.data.productParts
							}
							this.showPurchaseModifyHandlePopup = true
							// this.factories = JSON.parse(JSON.stringify(res.data.items))
						}
					})
				} else if (order.status === 'special') {

					this.currentPurchaseModifyMaterial = {
						isSpecial: true,
						type: 'handle',
						status: order.status,
						orderId: order.id,
						specialRemark: order.specialRemark
					}
					this.showPurchaseModifyHandlePopup = true
				} else if (order.status === 'ret') {
					let t = 'handle';
					if (order.auditStatus != 'wait') {
						t = 'detail';
					}

					this.currentPurchaseModifyMaterial = {
						isRet: true,
						status: order.status,
						type: t,
						orderId: order.id,
						retRemark: order.notStandardRemark
					}
					this.showPurchaseModifyHandlePopup = true
				}

			},
			modifyConfirmHandle(val) {
				const existingIndex = this.orders.findIndex(item => item.id === val.orderId);
				this.$set(this.orders[existingIndex], 'status', 'in');
				this.$set(this.orders[existingIndex], 'statusClass', 'in');
				this.$set(this.orders[existingIndex], 'statusName', '待入库');
				if (val.status === 'ret') {

				}




			},
			getOptimizedImageUrl(filename) {
				const ext = filename.split('.').pop();
				return cfg.httpUrl + 'purchaseOrder/getPurchaseImage?filename=' + filename;

			},
			purchaseEdit(order) {
				uni.navigateTo({
					url: `/pages/addPurchase/edit?orderId=` + order.id
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #f5f7fa;
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
		padding: 0;
		margin: 0;
		color: #333;
	}

	.container {
		padding: 20rpx;
	}

	.header {
		text-align: center;
		padding: 30rpx 0;
		background: linear-gradient(135deg, #3498db, #2ecc71);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		color: white;
		box-shadow: 0 10rpx 30rpx rgba(52, 152, 219, 0.3);
	}

	.header h1 {
		font-size: 40rpx;
		margin-bottom: 15rpx;
		font-weight: 600;
	}

	.header p {
		font-size: 26rpx;
		opacity: 0.9;
	}

	.filter-card {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.filter-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		display: flex;
		align-items: center;
		position: relative;
		padding-left: 20rpx;
	}

	.filter-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 8rpx;
		height: 36rpx;
		background: #3498db;
		border-radius: 4rpx;
	}

	.filter-row {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx;
	}

	.filter-item {
		width: 100%;
		padding: 0 10rpx;
		margin-bottom: 30rpx;
	}

	.full-width {
		width: 100%;
	}

	.picker-btn {
		background-color: #f8f9fa;
		border: 1rpx solid #e1e1e1;
		border-radius: 10rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
	}

	.picker-placeholder {
		color: #999;
	}

	.data-card {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
		margin-bottom: 60rpx;
	}

	.data-header {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #f8f9fa;
		border-bottom: 1rpx solid #eee;
	}

	.data-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}

	.data-count {
		background-color: #3498db;
		color: white;
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}

	.collapse-item {
		border-bottom: 1rpx solid #eee;
	}

	.collapse-header {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fafbfc;
	}

	.collapse-title {
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 28rpx;
	}

	.collapse-icon {
		margin-right: 20rpx;
		color: #3498db;
		transition: transform 0.3s;
		font-size: 32rpx;
	}

	.collapse-icon.rotate {
		transform: rotate(90deg);
	}

	.status-tag {
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}

	.status-tag.in {
		background-color: #e8f5e9;
		color: #2ecc71;
	}

	.status-tag.out {
		background-color: #ffebee;
		color: #e74c3c;
	}

	.status-tag.pending {
		background-color: #fff8e1;
		color: #f39c12;
	}

	.collapse-content {
		padding: 30rpx;
		background-color: #fff;
	}

	.sub-item {
		padding: 20rpx;
		margin: 15rpx 0;
		background-color: #f9f9f9;
		border-radius: 16rpx;
		border-left: 6rpx solid #3498db;
	}

	.sub-item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
		padding-bottom: 15rpx;
		border-bottom: 1rpx dashed #eee;
	}

	.sub-item-title {
		font-weight: 500;
		color: #2c3e50;
		font-size: 28rpx;
	}

	.sub-item-content {
		display: flex;
		flex-wrap: wrap;
	}

	.detail-item {
		width: 90%;
		padding: 10rpx 0;
	}

	.detail-label {
		color: #7f8c8d;
		font-size: 26rpx;
		margin-right: 10rpx;
	}

	.detail-value {
		color: #2c3e50;
		font-weight: 500;
		font-size: 26rpx;
	}

	.accessory-list {
		width: 100%;
		margin-top: 20rpx;
		border-collapse: collapse;
	}

	.accessory-list th {
		background-color: #f1f8ff;
		padding: 20rpx;
		text-align: left;
		font-weight: 500;
		color: #3498db;
		font-size: 26rpx;
	}

	.accessory-list td {
		padding: 25rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		font-size: 26rpx;
	}

	.accessory-list tr:last-child td {
		border-bottom: none;
	}

	.btn-primary {
		background-color: #3498db;
		color: white;
		border: none;
	}

	.btn-outline {
		background-color: transparent;
		color: #3498db;
		border: 1rpx solid #3498db;
	}

	.no-data {
		text-align: center;
		padding: 60rpx;
		color: #95a5a6;
	}

	.no-data i {
		font-size: 80rpx;
		margin-bottom: 30rpx;
		color: #bdc3c7;
	}

	.footer {
		text-align: center;
		padding: 30rpx;
		color: #7f8c8d;
		font-size: 26rpx;
		margin-top: 30rpx;
	}

	.filter-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.filter-buttons u-button {
		flex: 1;
		margin: 0 10rpx;
	}

	.selected-items {
		margin-top: 30rpx;
		padding: 20rpx;
		background-color: #f1f8ff;
		border-radius: 16rpx;
	}

	.selected-title {
		font-size: 28rpx;
		color: #3498db;
		margin-bottom: 15rpx;
	}

	.selected-tag {
		display: inline-block;
		padding: 10rpx 20rpx;
		background-color: #e1f0fa;
		border-radius: 30rpx;
		margin: 0 15rpx 15rpx 0;
		font-size: 24rpx;
		color: #2980b9;
	}

	.selected-tag i {
		margin-left: 10rpx;
		cursor: pointer;
	}

	.product-list {
		margin-top: 30rpx;
		background: #f9f9f9;
		padding: 30rpx;
		border-radius: 16rpx;
	}

	.product-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		font-weight: 500;
		font-size: 28rpx;
		color: #2c3e50;
	}

	.product-model {
		font-size: 24rpx;
		color: #7f8c8d;
		margin-top: 5rpx;
	}

	.accessory-checkbox {
		margin-left: 20rpx;
	}

	.product-arrow.down {
		transform: rotate(90deg);
	}

	.btn-container {
		display: flex;
		justify-content: flex-end;
		/* 按钮整体靠右 */
		gap: 12px;
		/* 按钮间距 */
		width: 100%;
		/* 自适应容器宽度 */
	}

	/* 按钮基础样式 */
	.search-btn,
	.reset-btn {
		padding: 10px 24px;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.3s;
		/* 平滑过渡效果 */
	}

	/* 查询按钮样式 */
	.search-btn {
		background: #1890ff;
		/* 主色调 */
		color: white;
	}

	/* 重置按钮样式 */
	.reset-btn {
		background: #f5f5f5;
		/* 中性灰 */
		color: #666;
		border: 1px solid #d9d9d9;
		/* 浅边框 */
	}

	/* 悬停效果 */
	.search-btn:hover {
		background: #40a9ff;
		box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
	}

	.reset-btn:hover {
		background: #fff;
		border-color: #1890ff;
		color: #1890ff;
	}


	.accessory-list-container {
		background: white;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
		/* margin-bottom: 30px; */
	}

	.table-header {
		display: flex;
		background: #f1f8ff;
		color: white;
		padding: 16px 20px;
		font-weight: 600;
		font-size: 12px;
		/* font-size: 1.05rem; */
	}

	.table-row {
		display: flex;
		padding: 10px 10px;
		border-bottom: 1px solid #f0f4f8;
		align-items: center;
		transition: background 0.2s;
		font-size: 12px;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.table-row:hover {
		background-color: #f8fafc;
	}

	.col-name {
		width: 25%;
		color: #2c3e50;
	}

	.col-quantity {
		width: 38%;
		text-align: center;
		color: #2c3e50;
	}

	.col-price {
		width: 20%;
		color: #2c3e50;
		/* font-weight: 600; */
	}

	.col-action {
		text-align: right;
		color: #2c3e50;
	}

	.status-tag {
		display: inline-block;
		padding: 5px 5px;
		border-radius: 20px;
		font-size: 0.85rem;
		font-weight: 500;
		margin-right: 10px;
	}

	.status-tag.in {
		background: #e1f3ff;
		color: #3498db;
	}

	.status-tag.out {
		background: #ffebee;
		color: #e74c3c;
	}

	.status-tag.pending {
		background: #fff8e1;
		color: #f39c12;
	}

	.action-btn {
		display: inline-block;
		padding: 5px 8px;
		border-radius: 6px;
		font-size: 0.7rem;
		cursor: pointer;
		/* margin-left: 10px; */
		transition: all 0.2s ease;
		font-weight: 500;
		border: none;
	}

	.btn-outline {
		background: transparent;
		border: 1px solid #3498db;
		color: #3498db;
	}

	.btn-outline:hover {
		background: #3498db;
		color: white;
	}

	.btn-primary {
		background: #3498db;
		color: white;
	}

	.btn-primary:hover {
		background: #2980b9;
	}

	.showCanvasPopup {
		overflow: hidden;
		position: fixed;
	}

	.action-btn2 {
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		cursor: pointer;
	}
</style>